iT邦幫忙

第 12 屆 iThome 鐵人賽
DAY 19
1
自我挑戰組

30天找回寫程式手感計劃！！！系列 第 19 篇

Day19 - 正規表示式 x JavaScript x JSON ( 1/2 )

12th鐵人賽
536 瀏覽

  • 分享至 

  • xImage
    •  

這兩天真的要開天窗了QQ
今天的材料找很久，
一直沒梗QQ
看到前幾天的資料集，
只好先拿它開刀了！
然後我將內容拆成 2 天，
所以今天是半成品，
明天才會有完成品出爐。

正片

今日素材：Day17的口罩數量資料集

會挑選這個是因為在資料集看到有各藥局的營業時間：
https://ithelp.ithome.com.tw/upload/images/20200925/20129873WsV3iuu9xy.png
覺得可以把它延伸做成查詢星期幾哪間藥局有開的清單！

用 split 將星期幾字串拆開

觀察 available 字串可以發現，
它都是用頓號分隔開來。

"星期一上午看診、星期二上午看診、星期三上午看診、星期四上午看診、星期五上午看診、星期六上午看診、星期日上午看診、星期一下午看診、星期二下午看診、星期三下午看診、星期四下午看診、星期五下午看診、星期六下午看診、星期日下午看診、星期一晚上看診、星期二晚上看診、星期三晚上看診、星期四晚上看診、星期五晚上看診、星期六晚上看診、星期日晚上看診";

所以我們可以用 split 將星期幾字串拆開：

let availTimeArray = availTimeStr.split("、");

然後就會將拆開的結果存成陣列，

for ( let j=0; j<availTimeArray.length; j++ ){
        console.log(`${availTimeArray[j]}`);
}

印出來就會像這樣：
https://ithelp.ithome.com.tw/upload/images/20200925/201298733fejQDLqBH.png

用正規表示式比對字串

再來我希望將各星期有營業的藥局清單分開存起來，
這樣之後例如要找尋星期一有營業的藥局就只要撈星期一的物件陣列就好。
所以一樣用到 match 的語法，
有比對到則回傳內容，沒比對到則回傳 null，
然後要一步一步來，
所以我先複製其中一筆 available 的字串來試寫這邊的邏輯，
像這樣：

let availTimeStr = "星期一上午看診、星期二上午看診、星期三上午看診、星期四上午看診、星期五上午看診、星期六上午看診、星期日上午看診、星期一下午看診、星期二下午看診、星期三下午看診、星期四下午看診、星期五下午看診、星期六下午看診、星期日下午看診、星期一晚上看診、星期二晚上看診、星期三晚上看診、星期四晚上看診、星期五晚上看診、星期六晚上看診、星期日晚上看診";
let availTimeArray = availTimeStr.split("、");
let availStoreList = {
    Mon: [],
    Tue: [],
    Wed: [],
    Thu: [],
    Fri: [],
    Sat: [],
    Sun: [],
};

for ( let j=0; j<availTimeArray.length; j++ ){
    console.log(availTimeArray[j]);
    if ( availTimeArray[j].match("星期一") !== null ){
        availStoreList.Mon.push({Name:"家佑藥師藥局",County:"桃園市",Town:"龜山區",Memo:availTimeArray[j]});
    }
    if ( availTimeArray[j].match("星期二") !== null ){
        availStoreList.Tue.push({Name:"家佑藥師藥局",County:"桃園市",Town:"龜山區",Memo:availTimeArray[j]});
    }
    if ( availTimeArray[j].match("星期三") !== null ){
        availStoreList.Wed.push({Name:"家佑藥師藥局",County:"桃園市",Town:"龜山區",Memo:availTimeArray[j]});
    }
    if ( availTimeArray[j].match("星期四") !== null ){
        availStoreList.Thu.push({Name:"家佑藥師藥局",County:"桃園市",Town:"龜山區",Memo:availTimeArray[j]});
    }
    if ( availTimeArray[j].match("星期五") !== null ){
        availStoreList.Fri.push({Name:"家佑藥師藥局",County:"桃園市",Town:"龜山區",Memo:availTimeArray[j]});
    }
    if ( availTimeArray[j].match("星期六") !== null ){
        availStoreList.Sat.push({Name:"家佑藥師藥局",County:"桃園市",Town:"龜山區",Memo:availTimeArray[j]});
    }
    if ( availTimeArray[j].match("星期日") !== null ){
        availStoreList.Sun.push({Name:"家佑藥師藥局",County:"桃園市",Town:"龜山區",Memo:availTimeArray[j]});
    }
    
}
console.log(availStoreList.Sun[0]);

https://ithelp.ithome.com.tw/upload/images/20200925/20129873zDxOl7efbT.png

看起來一筆沒問題了！
將資料改成 2 筆的完整資料結構看看。

  • 資料宣告部份：
let responseData = [{
    "type": "Feature",
    "properties": {
        "id": "5932076657",
        "name": "家佑藥師藥局",
        "phone": "(03)3280055",
        "address": "桃園市龜山區文化二路３０之１號１樓",
        "mask_adult": 1800,
        "mask_child": 200,
        "updated": "2020\/09\/25 14:44:59",
        "available": "星期一上午看診、星期二上午看診、星期三上午看診、星期四上午看診、星期五上午看診、星期六上午看診、星期日上午看診、星期一下午看診、星期二下午看診、星期三下午看診、星期四下午看診、星期五下午看診、星期六下午看診、星期日下午看診、星期一晚上看診、星期二晚上看診、星期三晚上看診、星期四晚上看診、星期五晚上看診、星期六晚上看診、星期日晚上看診",
        "note": "口罩販賣時段：早上九點開始販賣賣完為止",
        "custom_note": "",
        "website": "",
        "county": "桃園市",
        "town": "龜山區",
        "cunli": "大湖里",
        "service_periods": "NNNNNNNNNNNNNNNNNNNNN"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [
            121.364421,
            25.060354
        ]
    }
},
{
    "type": "Feature",
    "properties": {
        "id": "5931141860",
        "name": "北聯藥局",
        "phone": "(02)82866873",
        "address": "新北市蘆洲區民族路３６１號１樓",
        "mask_adult": 620,
        "mask_child": 60,
        "updated": "2020\/09\/25 14:44:59",
        "available": "星期一上午看診、星期二上午看診、星期三上午看診、星期四上午看診、星期五上午看診、星期六上午看診、星期日上午看診、星期一下午看診、星期二下午看診、星期三下午看診、星期四下午看診、星期五下午看診、星期六下午看診、星期日下午看診、星期一晚上看診、星期二晚上看診、星期三晚上看診、星期四晚上看診、星期五晚上看診、星期六晚上看診、星期日晚上看診",
        "note": "-",
        "custom_note": "",
        "website": "",
        "county": "新北市",
        "town": "蘆洲區",
        "cunli": "水湳里",
        "service_periods": "NNNNNNNNNNNNNNNNNNNNN"
    },
    "geometry": {
        "type": "Point",
        "coordinates": [
            121.471757,
            25.091617
        ]
    }
},
];
  • 物件陣列宣告
let availTimeArray = [];
let availStoreList = {
    Mon: [],
    Tue: [],
    Wed: [],
    Thu: [],
    Fri: [],
    Sat: [],
    Sun: [],
};
  • 後面的比對邏輯
for ( let i=0;i<responseData.length;i++ ){
    console.log(`${responseData[i].properties.available}`);
    availTimeArray = responseData[i].properties.available.split("、");
    for ( let j=0; j<availTimeArray.length; j++ ){
        console.log(`${availTimeArray[j]}`);
        if ( availTimeArray[j].match("星期一") !== null ){
            availStoreList.Mon.push({Name:responseData[i].properties.name,County:responseData[i].properties.county,Town:responseData[i].properties.town,Memo:availTimeArray[j]});
            continue;
        }
        if ( availTimeArray[j].match("星期二") !== null ){
            availStoreList.Tue.push({Name:responseData[i].properties.name,County:responseData[i].properties.county,Town:responseData[i].properties.town,Memo:availTimeArray[j]});
            continue;
        }
        if ( availTimeArray[j].match("星期三") !== null ){
            availStoreList.Wed.push({Name:responseData[i].properties.name,County:responseData[i].properties.county,Town:responseData[i].properties.town,Memo:availTimeArray[j]});
            continue;
        }
        if ( availTimeArray[j].match("星期四") !== null ){
            availStoreList.Thu.push({Name:responseData[i].properties.name,County:responseData[i].properties.county,Town:responseData[i].properties.town,Memo:availTimeArray[j]});
            continue;
        }
        if ( availTimeArray[j].match("星期五") !== null ){
            availStoreList.Fri.push({Name:responseData[i].properties.name,County:responseData[i].properties.county,Town:responseData[i].properties.town,Memo:availTimeArray[j]});
            continue;
        }
        if ( availTimeArray[j].match("星期六") !== null ){
            availStoreList.Sat.push({Name:responseData[i].properties.name,County:responseData[i].properties.county,Town:responseData[i].properties.town,Memo:availTimeArray[j]});
            continue;
        }
        if ( availTimeArray[j].match("星期日") !== null ){
            availStoreList.Sun.push({Name:responseData[i].properties.name,County:responseData[i].properties.county,Town:responseData[i].properties.town,Memo:availTimeArray[j]});
            continue;
        }
    }
}

https://ithelp.ithome.com.tw/upload/images/20200925/20129873zoWCIg25th.png

看起來初步的邏輯是 OK 了，
但有一個問題，
就是上午、下午、晚上是被分開的，
因此會重複存到 3 筆，
看起來連上午、下午、晚上都得分開處理才行orz
但今天只能先到這邊了，
剩下的待明日完成orz

[明日課題]

  1. 上午、下午、晚上要分開處理
  2. match 的地方實在太過重複，有沒有辦法寫的更簡潔一點
  3. 要在網頁有 2 個下拉式選單，一個選星期，一個選時段，
    選完下方即會出現該天該時段有營業的藥局清單。

上一篇
Day18 - 正規表示式學好就可以知道如何正確的表達心意是否搞錯了什麼
下一篇
Day20 - 正規表示式 x JavaScript x JSON ( 2/2 )
系列文
30天找回寫程式手感計劃！！！ 共 36 篇
  1. 32
    Day32 - 「登愣登愣，登愣登登登」～ 隱挑戰 Day8
  2. 33
    Day33 - 「登愣登愣，登愣登登登」～ 隱挑戰 Day9
  3. 34
    Day34 - 「登愣登愣，登愣登登登」～ 隱挑戰 Day10
  4. 35
    Day35 - 「登愣登愣，登愣登登登」～ 隱挑戰 Day11
  5. 36
    Day36 - 「登愣登愣，登愣登登登」～ 隱挑戰 Day12 ─ 果然我的青春寫扣喜劇搞錯了。完
完整目錄
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言
iThome鐵人賽
參賽組數
1123 組
團體組數
52 組
累計文章數
23096 篇
完賽人數
656 人
iT+看影片追技術 看影片追技術 看更多
熱門tag 看更多
15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽 鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js
熱門問題
熱門回答
熱門文章
IT邦幫忙